<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
        integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <script src="../js/vue.js"></script>
    <style>
        h4{
            display: inline-block;
        }
        .form-control{
            display: inline-block;
            margin-left: 10px;
            width: 800px;
            vertical-align: auto;
            border: 1px solid red; 
        }
        .active{
            background-color: aqua;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- {{arr}} -->
        <div class="form-group">
            <h4>淘宝搜索：</h4>
            <input type="text" class="form-control" v-model="kw" @keydown.down.prevent="down" @keydown.up.prevent="up" @keydown.enter="enter" >
            <ul>
                <li v-for="(item,index) in arr" v-if="6>index"  :key="item[0]" :class="index===n?'active':''">{{item[0]}}
                </li>
            </ul>
        </div>
    </div>
    <script>
          Vue.config.productionTip = false 


        let vm = new Vue({
            el: "#app",
            data: {
                kw: "",
                arr: [],
                n: -1
            },
            methods: {
                //下键
                down() {
                    this.n++;
                    if (this.n >= 6) {
                        this.n = -1
                    }
                },
                //上键
                up() {
                    this.n--;
                    if (this.n < 0) {
                        this.n = 6
                    }
                },

                enter() {
                    if (this.n >= 0 && this.n <= 5) {
                        window.open("https://s.taobao.com/search?q="+this.arr[this.n][0])
                    } else {
                        window.open("https://s.taobao.com/search?q="+this.kw)

                    }

                }
            },
            watch: {
                kw() {
                    if (this.kw === '') {
                        this.arr = []
                        return;
                    }
                    let os = document.createElement("script");
                    os.src = `https://suggest.taobao.com/sug?q=${this.kw}&callback=aa&code=utf-8`
                    document.body.appendChild(os)
                }
            }
        })
        function aa(d) {
            console.log(d);
            vm.arr = d.result
        }
    </script>
</body>

</html>